<template>
    <!-- 员工后台:活动列表 -->
    <div class="container">
        <div style="display: flex;justify-content: space-around; margin-bottom: 15px;">
            <el-input v-model="createSearch" style="width: 300px;" placeholder="请输入申请时间..."></el-input>
            <el-input v-model="startSearch" style="width: 300px;" placeholder="请输入开始时间..."></el-input>
            <el-input v-model="nameSearch" style="width: 300px;" placeholder="请输入活动名称..."></el-input>
            <el-input v-model="addressSearch" style="width: 300px;" placeholder="请输入活动地址..."></el-input>
        </div>
        <el-table
            :data="tableData"
            height="91%"
            border
            style="width: 100%">

            <el-table-column
            prop="create_time"
            label="申请时间"
            sortable
            width="101">
            </el-table-column>
            <el-table-column
            prop="active_name"
            label="活动名称"
            width="150"
            show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
            prop="active_address"
            label="活动地址"
            width="250"
            show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
            prop="start_time"
            label="开始时间"
            sortable
            width="101">
            </el-table-column>
            <el-table-column
            prop="end_time"
            label="结束时间"
            sortable
            width="101">
            </el-table-column>

            <el-table-column
            prop="status"
            label="状态"
            width="79"
            >
            <template slot-scope="scope">
                <el-tag :type="scope.row.status==='未通过'?'danger':'success'" size="medium">{{scope.row.status}}</el-tag>
            </template>
            </el-table-column>

            <el-table-column
            prop="context"
            label="活动内容"
            width="350"
            show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
            prop="summary"
            label="活动总结"
            width="280"
            show-overflow-tooltip
            >
            </el-table-column>
        </el-table>
    </div>

</template>

<script>
import myAxios from '@/tools/myAxios'
    export default {
        name:'StatusEmployeeActiveList',
        data() {
            return {
                // 展示所用
                tableData: [],
                // 存放所有数据所用
                allTableData:[],
                // 申请时间查询
                createSearch:'',
                // 开始时间查询
                startSearch:'',
                // 活动名称查询
                nameSearch:'',
                // 活动地址查询
                addressSearch:''
            }
        },
        watch:{
            createSearch(newValue){
                this.tableData = this.allTableData.filter((item)=>{
                    return item.create_time.indexOf(newValue) !== -1;
                })
            },
            startSearch(newValue){
                this.tableData = this.allTableData.filter((item)=>{
                    return item.start_time.indexOf(newValue) !== -1;
                })
            },
            nameSearch(newValue){
                this.tableData = this.allTableData.filter((item)=>{
                    return item.active_name.indexOf(newValue) !== -1;
                })
            },
            addressSearch(newValue){
                this.tableData = this.allTableData.filter((item)=>{
                    return item.active_address.indexOf(newValue) !== -1;
                })
            }
        },
        mounted(){
            const id = JSON.parse(sessionStorage.getItem('user')).id;
            // 获取当前登录员工所申请的活动列表
            myAxios(
                'http://localhost:8088/employee/getactiveoncurrentemployeeid?id='+id,
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        // 提示一下
                        this.$message({
                            message: '该员工没有申请过活动!',
                            type: 'warning'
                        });
                    }else{
                        this.allTableData = data;
                        this.tableData = data;
                    }
                }
            )
        }
    }
</script>

<style lang="less" scoped>
.container{
    width: 97%;
    height: 650px;

    padding: 15px;
    background-color: white;
    border-radius: 10px;
}
</style>